<template>
  <view class="contain">
    <view class="main">
      <view class="typeText" v-if="orderInfo?.status === 'WAIT_PAY'">待支付</view>
      <view class="typeInfo" v-if="orderInfo?.status === 'WAIT_PAY'">订单即将关闭,请及时支付</view>
      <view class="nameBox">
        <image class="img" src="../../../static/shop/dd.png" mode=""></image>
        <view class="nameInfo">
          <view class="f">
            <text>{{ orderInfo?.consignee || "" }}</text>
            {{ orderInfo?.consigneeCell || "" }}
          </view>
          <view class="s">{{ orderInfo?.consigneeAddress || "12313" }}</view>
        </view>
      </view>
      <view class="nameBox">
        <image class="img2" :src="orderInfo?.goodUrl" mode=""></image>
        <view class="nameInfo box">
          <view class="f">{{ orderInfo?.goodTitle }}</view>
          <view class="s">{{ orderInfo?.styleName }}</view>
          <view class="t">
            <view class="l">x{{ orderInfo?.goodSum }}</view>
            <view class="price">
              <text>￥</text>
              {{ orderInfo?.actualAmount }}
            </view>
          </view>
        </view>
      </view>
      <view class="shopBox">
        <view class="item">
          <view class="l">订单号:</view>
          <view class="r">{{ orderInfo?.orderNo }}</view>
        </view>
        <view class="item">
          <view class="l">下单时间:</view>
          <view class="r">{{ dayjs(orderInfo?.gmtCreate).format("YYYY-MM-DD HH:mm:ss") }}</view>
        </view>
        <view class="item">
          <view class="l">支付方式:</view>
          <view class="r">{{ payType[orderInfo?.payType] }}</view>
        </view>
        <view class="item">
          <view class="l">配送方式:</view>
          <view class="r">{{ orderInfo?.delivery }}</view>
        </view>
        <view style="border-bottom: 1px solid #f3f3f3; margin-top: 32rpx"></view>
        <view class="item" style="justify-content: space-between">
          <view class="l">商品金额:</view>
          <view class="r" style="font-weight: 600">¥{{ orderInfo?.actualAmount }}</view>
        </view>
      </view>
      <view class="bottomBox">
        <view class="btn-type" @click.stop="cancelOrderFn" v-if="orderInfo?.status === 'WAIT_PAY' || orderInfo?.status === 'PAY_SUCCESS'">取消订单</view>
        <view class="btn-type blue" @click.stop="goPay" v-if="orderInfo?.status === 'WAIT_PAY'">去支付</view>
        <view class="btn-type blue" v-if="orderInfo?.status === 'IN_DISTRIBUTION'" @click.stop="confirmReceipt">确认收货</view>
        <view class="btn-type" @click.stop="deleteOrderFn" v-if="orderInfo?.status === 'CONFIRM_RECEIPT'">删除订单</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, ref } from "vue";
import { useStore } from "@/stores/counter";
import dayjs from "dayjs";
import { cancelShopOrder, confirmReceiptShop, deleteShopOrder, selectOrderByOrderNo, YCcancelOrder, YCconfirmOrder, YCselectOrderByOrderNo } from "@/api/order";
const { orderId, type } = defineProps<{ orderId: string; type: "putong" | "car" | "huiyuan" }>();
const orderInfo = ref();
const { orderType, payType }: any = useStore();

onBeforeMount(async () => {
  console.log(orderId);
  if (type === "putong") {
    const res = await selectOrderByOrderNo({ orderNo: orderId });
    orderInfo.value = res.orderDO;
    //@ts-ignore
    uni.setNavigationBarTitle({ title: orderType[orderInfo?.status] || "订单详情" });
  } else if (type === "huiyuan") {
    const res = await YCselectOrderByOrderNo({ orderNo: orderId });
    orderInfo.value = res.vipOrderInfo;
    //@ts-ignore
    uni.setNavigationBarTitle({ title: orderType[orderInfo?.status] || "订单详情" });
  }
});
const goPay = () => {
  useStore().setPayInfo({
    orderNo: orderInfo.value.id,
    price: orderInfo.value.actualAmount,
    type,
  });
  uni.navigateTo({
    url: `/pages/payPage/payPage`,
  });
};
const confirmReceipt = () => {
  uni.showModal({
    title: "提示",
    content: "您确定要确认收货吗？",
    success: async function (res) {
      if (res.confirm) {
        if (type === "putong") {
          await confirmReceiptShop({
            orderNo: orderId,
            userId: uni.getStorageSync("userId"),
          });
        } else if (type === "huiyuan") {
          await YCconfirmOrder({
            orderNo: orderId,
            userId: uni.getStorageSync("userId"),
          });
        }

        uni.showToast({
          title: "操作成功",
          icon: "success",
          position: "top",
          success() {
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          },
        });
      }
    },
  });
};
const cancelOrderFn = async () => {
  uni.showModal({
    title: "提示",
    content: "您确定要取消订单吗？",
    success: async function (res) {
      if (res.confirm) {
        if (type === "putong") {
          await cancelShopOrder({ orderNo: orderId });
        } else if (type === "huiyuan") {
          await YCcancelOrder({ orderNo: orderId });
        }
        uni.showToast({
          title: "取消成功",
          icon: "success",
          position: "top",
          success() {
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          },
        });
      }
    },
  });
};
const deleteOrderFn = async () => {
  uni.showModal({
    title: "提示",
    content: "您确定要删除吗",
    success: async function (res) {
      if (res.confirm) {
        await deleteShopOrder({ orderNo: orderId });
        uni.showToast({
          title: "删除成功",
          icon: "success",
          position: "top",
          success() {
            uni.redirectTo({
              url: `/pages/goodsDetails/goodsOrderList?status=null`,
            });
          },
        });
      }
    },
  });
};
</script>

<style lang="less" scoped>
.contain {
  padding-bottom: 150rpx;
}
.main {
  margin-top: 50rpx;
  .typeText {
    font-size: 32rpx;
    font-weight: 600;
    color: #000;
    line-height: 42rpx;
    text-align: center;
  }
  .typeInfo {
    font-size: 26rpx;
    color: #000;
    line-height: 36rpx;
    text-align: center;
    margin-top: 16rpx;
    margin-bottom: 40rpx;
  }
}
.nameBox {
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  background: #fff;
  .img {
    width: 50rpx;
    height: 60rpx;
    margin-right: 24rpx;
  }
  .img2 {
    width: 144rpx;
    height: 144rpx;
    margin-right: 24rpx;
  }
  .nameInfo {
    .f {
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
      line-height: 36rpx;
      text {
        margin-right: 24rpx;
      }
    }
    .s {
      font-size: 26rpx;
      color: #bebebe;
      line-height: 36rpx;
      margin-top: 8rpx;
    }
    .t {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .l {
        font-size: 24rpx;
        color: #bebebe;
        line-height: 34rpx;
      }
      .price {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        line-height: 34rpx;
        text {
          font-size: 24rpx;
          font-weight: 500;
          margin-right: -15rpx;
        }
      }
    }
  }

  .box {
    width: calc(100% - 168rpx);
  }
}
.shopBox {
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
  background: #fff;
  .item {
    width: 100%;
    display: flex;
    align-items: center;

    margin-top: 32rpx;
    .l {
      width: 170rpx;
      font-size: 26rpx;
      color: #bebebe;
      line-height: 36rpx;
    }
    .r {
      font-size: 26rpx;
      font-weight: 500;
      color: #333;
      line-height: 34rpx;
    }
    &:first-child {
      margin-top: 0px;
    }
  }
}
.bottomBox {
  display: flex;
  justify-content: flex-end !important;
  .btn-type {
    border: 2rpx solid #dddee2;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: center;
    padding: 12rpx 24rpx;
    margin-right: 20rpx;
    &:last-child {
      margin-right: 0;
    }
  }
  .blue {
    background: #81d8d0;
    color: #fff;
  }
}
</style>
